<template>
	<view class="search page b-bg" id='search'>
		<view class="inputBox">
			<view class="input">
				<input type="text" value="" placeholder="输入作品编号、姓名、作品名称搜索" v-model="form_data.keyword"  class="searchInput"/>
				<image src="../../static/img/sousuo.png" mode="" class="btn" @tap="search"></image>
			</view>
		</view>
		<view class="tips">
			<text class="red">{{list.length}}</text> 条搜索结果
		</view>
		
		<scroll-view scroll-y="true"  class="items"  @scrolltolower="scrolltolower" lower-threshold="50">
			<view class="item" v-for="(item,index) in list" :key="index" @tap='goDetail(item.id)'>
					<view class="imgBox" :style="{ backgroundImage: `url(${$ft.getCover(item.file_list)})`}"></view>
					<view class="info">
						<view class="title">
							{{item.title}}
						</view>
						<view class="f-title">
							{{item.username}} | {{item.school}}
						</view>
						<view class="f-title" v-show="item.is_vote_btn === 0">
							{{item.total_vote}} 票
						</view>
						<view class="btns">
							<!-- <view class="bt bt2" @tap.stop="showS">分享</view> -->
							<view class="bt" @tap.stop="envetTp(item)" v-show="item.is_vote_btn === 0">投票</view>
						</view>
					</view>
				</view>
				<view class="more-bottom" v-show="list.length > 0">
					<text v-show="!page.is_bottom">加载中...</text>
					<text v-show="page.is_bottom">没有更多了></text>
				</view>
		</scroll-view>
		<share ref="showS"></share>
	</view>
</template>

<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins:[mixin],
		data() {
			return {
				form_data:{
					city_id:"",
					county_id:"",
					role_id: "",
					keyword:"",
					goId:''
				},
				vote_num:5,
			    page:{
			    	is_bottom:false,
			    	page:1
			    },
				list:[]
			}
		},
		onLoad(options) {
			// this.render();
			this.goId = options.id;
		},
		methods:{
			search(){
				this.list = [];
				this.page = {
					is_bottom:false,
					page:1
				}
				this.render();
			},
			scrolltolower(){
				console.log('到底了');
			},
			envetTp(item){
				if(this.vote_num === 0) {
					this.toast("今日投票次数已用完");
					return;
				}
				console.log(item);
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '您今天还有'+ _this.vote_num +'次投票机会是否确定投票',
					success: async(res) => {
						if (res.confirm) {
							const res = await this.$http({
								url:"user/vote",
								method:'post',
								data:{
									id:item.id
								}
							})
							console.log(res);
							if(res.residue_num) {
								_this.vote_num = res.residue_num;
								item.total_vote ++;
								item.is_vote = true;
								_this.toast('投票成功')
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async render() {
				if(!this.page.is_bottom) {
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'article/' + this.goId,
						  method:'get',
						  data:postData
					})
					this.list.push(...res.data);
					console.log(this.list);
					this.vote_num = res.vote_remainder_num
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
		    }
		} 
	}
</script>

<style lang="scss">
	#search {
		width: 100%;
		height: 100%;
	}
    .inputBox {
		width: 100%;
		background-color: #fff;
		padding: 30rpx 20rpx;
		.input {
			background-color: #f7f7f7;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 60rpx;
			border-radius: 60rpx;
			position: relative;
			.searchInput {
				width: 360rpx;
				width: 90%;
			}
			.btn {
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				right:30rpx;
				top:22rpx;
			}
		}
	}
	.tips {
		padding: 30rpx 40rpx;
		font-size: 32rpx;
		.red {
			color:#f24545;
		}
	}
	.items {
		width: 100%;
	    height: calc(100% - 250rpx);
		padding: 0 34rpx;
		width: 750rpx;
		box-sizing: border-box;
	
		.item {
				   display: flex;
				   justify-content: space-between;
				   background-color: #fff;
				   margin-bottom: 30rpx;
				   padding: 22rpx 30rpx;
				   	border-radius: 20rpx;
				   .imgBox {
				   	 width: 300rpx;
					 height: 210rpx;
					 border-radius: 20rpx;
				   }
				   .info {
					   width: 300rpx;
					   .title {
						   @include text();
						   font-weight: 550;
						   margin-bottom: 14rpx;
					   }
					   .f-title {
						   font-size: 26rpx;
						   margin-bottom: 10rpx;
						    @include text();
					   }
				   }
				   .btns {
					   display: flex;
					   .bt {
						   margin-right: 20rpx;
						   padding: 10rpx 20rpx;
						   background-color: #f24545;
						   color:#fff;
						   font-size: 15rpx;
						   border-radius: 4rpx;
						   border-radius: 10rpx;
						   &.bt2 {
							   background-color: #ffad4c;
						   }
						   &.disable {
							   color:#fff;
							   background-color: #f5dede;
						   }
					   }
				   }
		}
	}
	.more-bottom {
		padding-bottom: 20rpx;
	}
</style>
